<template>
    <div class="payMent">
        <yx-header>
            <template #left>
                <van-icon name="arrow-left" @click="$router.go(-1)"/>
            </template>
            <template #center>
               确认付款
            </template>
            <template #right>
               
            </template>
        </yx-header>
         <div class="address">
                 <van-icon name="location-o" />
                 <section>
                    <p>商品总额：{{allPrice}}</p>
                     <p>订单编号：{{data.orderNumber}}</p>
                 </section>
                 
        </div>
         <div class="address">
                 <van-icon name="location-o" />
                 <section>
                    <p>{{address.linkMan}} {{address.mobile}}</p>
                     <p>{{address.address}}</p>
                 </section>
                 
         </div>
         <!-- 弹出层 -->
         <van-popup v-model:show="show">
            <div class="code">
                <p ref="dom"></p>
            </div>
         </van-popup>
         <div ref="box">123</div>
        
         <van-button type="primary" block color="#c00" class="btn" @click="pay">微信支付{{allPrice}}</van-button>


    </div>
</template>
<script>
import yxHeader from '@/components/yxHeader'
import {ref,reactive,toRefs,computed,nextTick} from 'vue'
import {useStore} from 'vuex'

import { Notify } from 'vant';
import {useRouter} from 'vue-router'
import {createOrder,getAddressDefault} from '@/utils/second'
import qrCode from 'qrcodejs2'
export default {
    setup(props) {
    const dom = ref(null)
    const box = ref(null)
    // nextTick(()=>{
    //     console.log(box.value);
    // })
    // setTimeout(()=>{
    //      console.log(box.value);
    // },1)
    
        const {state} = useStore()
        const data = reactive({
            address:{},
            data:{},
            show:false,
            
           
            orderList:computed(()=>state.shopList.filter(item=>item.order))

        })
        const allPrice = computed(()=>{
            let total=0;
            state.shopList.forEach(item=>{
                if(item.order == true){
                    total+=item.carNum*item.price
                }
            })
            return total
        })
        // arr是组合的数组
        let arr = []
        data.orderList.forEach(item=>{
            arr.push({
                 goodsId:item.goodsId,
                 number:item.carNum,
                 logisticsType:0,
                 propertyChildIds:item.checkId.join(',')
            })
        })
       // 创建订单的接口
       createOrder({goodsJsonStr:JSON.stringify(arr),token:localStorage.getItem('token')}).then(res=>{
          console.log(res)
          data.data = res.data
       })
    //    获取默认地址
         getAddressDefault({token:localStorage.getItem('token')}).then(res=>{
            console.log(res)
            data.address = res.data
        })
        // 支付
        const pay=()=>{
          data.show = true //一定要先弹出！！！！！！！！！！不然获取不到dom节点
          nextTick(()=>{
            console.log(dom.value);
            new qrCode(dom.value,{
                width:150,
                height:150,
                text:'MCU19619598ih2wj6b0lri9y74EhO'
            })

          })
          
        }

        
        return {...toRefs(data),allPrice,pay,dom,box}
    },
    components:{
        yxHeader
    }
}
</script>
<style lang="scss" scoped>
  .address{
    padding: 10px 16px;
    display: flex;
    align-items: center;
     background: #fff;
    section{
        flex:1;
        margin: 0 10px;
        p{
            font-size: 12px;
            margin-top: 5px;
        }
    }
  }
  .btn{
    position:fixed;
    left:0;
    bottom:0;
  }
  .code{
    padding: 10px;
    background: #fff;
  }
</style>
